<template>
  <div class="footer-component fixed inset-x-0 bottom-0">
    <div class="footer-box opacity-1">
      <div class="list flex space-x-3" id="footer-itxst">
        <transition v-for="(item, index) in list" :key="item.id">
          <div
            class="item"
            :data-id="item.id"
            v-show="num(item, index)"
            :class="store.state.editStatus ? 'edits' : ''"
          >
            <div class="itemBox hover" @click="redirectUrl(item.url, true)">
              <img
                v-if="store.state.editStatus"
                @click.stop="del(item)"
                class="del-footer"
                src="@/assets/svg/close.svg"
              />
              <img class="icon" :src="item.src" />
              <div>{{ item.name }}</div>
            </div>
          </div>
        </transition>
      </div>
    </div>
  </div>
</template>
<script setup>
import * as Sortable from "Sortable";
import { onMounted, ref, watch, defineProps } from "vue";
import { useStore } from "vuex";
import emitter from "../../util/emitter";
import redirectUrl from "../../util/href";
const store = useStore();
const list = ref(store.state.tabbar);
const num = (item, index) => {
  if (item.type == "icon") {
    return parseInt(window.innerWidth / 70) > index ? true : !false;
  }
};
const props = defineProps({
  reload: {
    type: Function,
  },
});
watch(
  () => store.state.tabbar,
  (lists) => {
    list.value = lists;
  }
);
const del = (item) => {
  const index = list.value.findIndex((el) => el.id == item.id);
  list.value.splice(index, 1);
  store.commit("updateTabbar", list.value);
};
onMounted(() => {
  var el = document.getElementById("footer-itxst");
  //设置配置
  var ops = {
    animation: 200,
    delay: 1000,
    delayOnTouchOnly: true,
    draggable: ".item",
    group: {
      name: "it",
      pull: false,
      put: true,
    },
    //拖动结束
    onEnd: function (evt) {
      var sortArr = sortable.toArray();
      let tmp = [];
      sortArr.forEach((el) => {
        tmp.push(list.value.find((d) => d.id == el));
      });
      store.commit("updateTabbar", tmp);
      props.reload();
    },
    //加入新的标签
    onAdd: function (evt) {
      let id = evt.clone.dataset.id;
      if (list.value.find((ee) => ee.id == id)) {
        evt.item.remove();
        return;
      }
      let info = store.getters.find(id);
      var sortArr = sortable.toArray();
      let allList = [info].concat(list.value);
      let tmp = [];
      sortArr.forEach((el) => {
        tmp.push(allList.find((d) => d.id == el));
      });
      store.commit("updateTabbar", tmp);
      emitter.emit("RefreshLink");
      props.reload();
    },
  };
  var sortable = window.Sortable.create(el, ops);
});
</script>
<style lang="less">
@media screen and (max-width: 480px) {
  /* 手机端CSS代码 */
  .footer-box {
    width: calc(100% - 30px);

    .list {
      justify-content: space-between;
    }
  }
}

@media screen and (min-width: 480px) {
  /* 电脑端CSS代码 */
  .footer-box {
    min-width: 370px;
  }
}

.footer-component {
  user-select: none;
  z-index: 200;
  display: flex;
  justify-content: center;
  transform: translateY(-15px);
}

.footer-box {
  position: relative;
  min-height: 60px;
  border-radius: 15px;
  display: flex;
  align-items: center;
  padding: 0px 5px;

  &::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    border-radius: 15px;
    left: 0;
    background: hsla(0, 0%, 100%, 0.3);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(40px);
    z-index: -1;
  }

  > .list {
    width: 100%;
    overflow-x: scroll;
    padding: 10px 10px;

    &::-webkit-scrollbar {
      display: none;
    }

    > .item {
      flex-shrink: 0;
      > .itemBox {
        height: 50px;
        width: 50px;
        position: relative;
        background-color: rgb(255, 255, 255);
        border-radius: var(--iconRadius);
        .del-footer {
          position: absolute;
          right: -8px;
          top: -8px;
          width: 16px;
          height: 16px;
          background: rgba(212, 212, 212, 0.651);
          cursor: pointer;
          z-index: 10;
          border-radius: var(--iconRadius);
        }

        > .icon {
          display: block;
          width: 50px;
          height: 50px;
          border-radius: 12px;
        }

        > div {
          display: none;
        }
      }
    }
  }
}
</style>
